<template>
  <view class="goods-item" @click="goodItemClickHandler">
    <!-- 复选框 -->
    <van-checkbox v-if="count_show" :value="item.goods_state" @change="handlerCheck(item.goods_id)"></van-checkbox>
    <!-- 图片 -->
    <view class="goods-img">
      <image :src="item.goods_small_logo || defaultPic" mode="" class="img-pic"></image>
    </view>
    <!-- 信息 -->
    <view class="goods-des">
      <text class="text">{{ item.goods_name }}</text>
      <view class="bottom">
        <text class="price">￥{{ item.goods_price.toFixed(2) }}</text>
        <count-box
          v-if="count_show"
          :value="item.goods_count"
          @input="
            (value) => {
              changeCount(value, item.goods_id);
            }
          "
        ></count-box>
      </view>
    </view>
  </view>
</template>

<script>
import { mapState, mapGetters } from 'vuex';
export default {
  computed: {
    // cartCount() {
    //   // console.log(this.cart);
    //  return this.cart.find(goods=>goods.goods_id===this.item.goods_id).goods_count;
    // }
  },
  name: 'my-goods',
  props: {
    item: {
      type: Object,
      default: {}
    },
    count_show: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      defaultPic: 'https://img3.doubanio.com/f/movie/8dd0c794499fe925ae2ae89ee30cd225750457b4/pics/movie/celebrity-default-medium.png',
      // cartCount: this.item.goods_count
    };
  },
  methods: {
    goodItemClickHandler() {
      // console.log('my-goods');
      this.$emit('click');
    },
    handlerCheck(goods_id) {
      this.$emit('isCheck', goods_id);
    },
    changeCount(goodsNum, goodsId) {

      // 还要往上送
      this.$emit('handler-count', { goodsId, goodsNum });
    }
  }
};
</script>

<style lang="scss">
.goods-item {
  display: flex;
  // align-items: center;
  justify-content: space-around;
  padding: 10px;
  border-bottom: 1px solid #e8e8e8;
  margin: 0 5px 5px 5px;
  background-color: #ffffff;
  border-radius: 5px;

  van-checkbox {
    display: flex;
    align-items: center;
  }
  .img-pic {
    width: 210rpx;
    height: 210rpx;
    margin: 0 5px;
  }

  .goods-des {
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .text {
      font-size: 13px;
      overflow-wrap: anywhere;
    }
    .bottom {
      display: flex;
      justify-content: space-between;
      .price {
        font-size: 18px;
        color: #b10000;
      }
    }
  }
}
</style>
